<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/Directory' }"
            >会员名录</el-breadcrumb-item
          >
          <el-breadcrumb-item>会员信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 内容栏 -->
        <div class="main-body">
          <div class="main-title">
            <div class="title-img">
              <img src="../../assets/headimg.png" alt="" />
            </div>
            <div class="title-content">
              <div class="member-name">贵州省工业融资担保有限责任公司</div>
              <div class="member-info">
                <div class="info-item">
                  统一社会信用代码：<span>91520115MAALUBXH7B</span>
                </div>
                <div class="info-item">归属地区：<span>省级</span></div>
                <div class="info-item">入会级别：<span>会长单位</span></div>
                <div class="info-item">入会时间：<span>2021-03-16</span></div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="company-synopsis">
            <div class="synopsis-title">公司简介</div>
            <div class="synopsis-text">
              贵州省工业融资担保有限责任公司（以下简称“工担公司”）于2021年8月经省地方金融监督管理局批准，工商注册成立，注册资本20亿元。股东为黔晟国资、工投公司，是省内首家工业专业担保机构。公司业务主管部门为贵州省工业和信息化厅，行业监管部门为贵州省地方金融监督管理局，贵州省黔晟国有资产经营有限责任公司履行出资人职责。
              为贯彻省委、省政府高质量发展战略，聚焦新型工业化和工业倍增行动，围绕“四新”主攻“四化”，助推贵州工业发展。工担公司将通过与银行开展深层次、广领域的合作，着力解决工业企业转型发展中面临的融资问题，为降低融资难度、扩大融资规模、提升融资效率发挥担保增信功能。工担公司直接服务于省内具有发展前景、成长性良好的优质工业企业，支持“十大工业产业”工程项目建设，推动特色优势产业提升升级，引导更多金融资源支持全省工业产业的高质量发展，构建“融、用、还”的良性循环，奋力推进全省工业实现大突破，构建为工业企业提供金融及信用综合服务和解决方案的运营平台。
              工担公司将紧密结合国家产业政策，服务贵州工业倍增行动，参与金融创新，为提升企业信用、改善社会信用环境、完善金融服务体系做出积极努力。
            </div>
          </div>
          <div class="company-info">
            <div class="synopsis-title">联系方式</div>
            <div class="info-text">联系电话： 0851-85553044</div>
            <div class="info-text">电子邮箱： gzgongdan@163.com</div>
            <div class="info-text">联系地址： 贵阳市云岩区延安西路1号建设大厦西楼24楼</div>
          </div>
          <div class="under-funbox">
            <div>上一篇：无</div>
            <div>
              下一篇：中鼎资信与省融资再担保有限责任公司签订战略合作协议
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
          
    <script>
export default {
  name: "MemberDetail",
  data() {
    return {
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
          
<style scoped>
/deep/.el-divider--horizontal {
  margin: 40px 0;
}
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.main-body {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  /* align-items: center; */
  width: 100%;
}
.main-body .main-title {
  display: flex;
}

.title-img {
  width: 90px;
  height: 90px;
}

.title-img img {
  width: 100%;
  height: 100%;
}

.title-content {
  margin-left: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.member-name {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #121212;
}

.member-info {
  display: flex;
  justify-content: space-between;
}
.company-synopsis {
  margin-bottom: 50px;
}
.synopsis-title {
  padding: 15px;
  background-color: #0056a2;
  border-radius: 5px;
  font-size: 18px;
  color: #fff;
  width: max-content;
  margin-bottom: 50px;
}

.synopsis-text {
  line-height: 2.5;
}

.info-item {
  color: #787878;
  font-size: 16px;
}

.info-item span {
  color: #121212;
}

.info-text{
    margin-bottom: 15px;
    font-size: 16px;
    font-family: Microsoft YaHei;
}

.main-body .release-time {
  margin: 30px 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #787878;
}

.main-body .under-funbox {
  margin-top: 30px;
  /* width: 100%; */
  background: #f6f6f6;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.main-body .under-funbox div {
  cursor: pointer;
}
</style>